<!-- pages/counter.vue -->
<script>
  export default {
    layout: "blog"
  }
</script>

<script setup>
  const { counter, increment, decrement, counterDouble } = useCounter()
</script>

<template>
  <div>
    <p class="m-2 text-3xl"><span class="font-semibold">Counter:</span> {{ counter }} x 2 = {{ counterDouble }}</p>
    <button @click="increment" class="m-2 py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700">+ Increment</button>
    <button @click="decrement" class="m-2 py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700">- Decrement</button>
    <hr>
    <div class="alert alert-success">
        <div class="flex-1">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-6 h-6 mx-2 stroke-current">          
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>                
            </svg> 
            <label>Lorem ipsum dolor sit amet, consectetur adip!</label>
        </div>
    </div>
    <div class="dropdown mt-6">
        <div tabindex="0" class="m-1 btn">Dropdown</div> 
        <ul tabindex="0" class="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
            <li>
            <a>Item 1</a>
            <div class="divider"></div> 
            </li> 
            <li>
            <a>Item 2</a>
            <div class="divider"></div> 
            </li> 
            <li>
            <a>Item 3</a>
            </li>
        </ul>
    </div>

  </div>
</template>